<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <style>

        *{
            margin:0;
            padding: 12;
        }

        body, button, input, select, textarea {
            font: 12px/1.5 tahoma,arial,'Hiragino Sans GB','\5b8b\4f53',sans-serif;
        }

        .clearfix:after {
            clear: both;
        }
        .clearfix:after, .clearfix:before {
            content: "";
            display: table;
        }

        li{
            list-style: none;
        }

        .sku-edit-popup {
            position: absolute;
            width: 250px;
            background: #fff;
            border: 1px solid #ccc;
            padding: 0 180px 0 0;
            -webkit-box-shadow: 0 2px 1px rgb(0 0 0 / 6%);
            -moz-box-shadow: 0 2px 1px rgba(0,0,0,.06);
            -ms-box-shadow: 0 2px 1px rgba(0,0,0,.06);
            box-shadow: 0 2px 1px rgb(0 0 0 / 6%);
            -webkit-border-radius: 1px;
            -moz-border-radius: 1px;
            -ms-border-radius: 1px;
            border-radius: 1px;
            z-index: 10002;
            min-height: 180px;
        }

        .sku-edit-popup .sku-edit-content {
            border-right: 1px solid #d9d9d9;
            padding: 20px 10px;
            min-height: 140px;
        }

        .clearfix, .find-similar-item-wrap, .fsi-info-wrap {
            zoom: 1;
        }

        .sku-props-selector .prop {
            overflow: hidden;
            margin-bottom: 15px;
        }

        .sku-props-selector .amount dt, .sku-props-selector .prop dt {
            float: left;
        }

        .sku-props-selector .amount dt, .sku-props-selector .prop dt {
            color: #A0A0A0;
            width: 60px;
        }

        .sku-props-selector .amount dd, .sku-props-selector .prop dd {
            margin-left: 65px;
        }

        .sku-props-selector .prop li {
            float: left;
            border: 1px solid #d1d1d1;
            background-color: #fff;
            line-height: 20px;
            margin: 0 7px 4px 0;
            position: relative;
        }

        .sku-props-selector .prop li, .sku-props-selector .prop a {
            color: #343434;
            cursor: pointer;
        }

        .sku-props-selector .prop .selected a, .sku-props-selector .prop .selected {
            border-color: #ff5704;
        }

        .sku-props-selector .prop li, .sku-props-selector .prop a {
            color: #343434;
            cursor: pointer;
        }

        .sku-props-selector .prop a {
            display: block;
            padding: 0 9px;
            line-height: 18px;
            height: 18px;
            border: 1px solid #fff;
            white-space: nowrap;
        }

        .sku-props-selector .prop .selected i {
            position: absolute;
            right: 0;
            bottom: 0;
            width: 12px;
            height: 12px;
            overflow: hidden;
            text-indent: -9999px;
            background: url(//gtd.alicdn.com/tps/i1/T1kzTMXcFXXXaPTuw.-12-51.png) no-repeat 0 -39px;
        }

        .sku-props-selector .prop {
            overflow: hidden;
            margin-bottom: 15px;
        }

        .sku-props-selector .amount dt, .sku-props-selector .prop dt {
            float: left;
        }

        .sku-props-selector .amount dd, .sku-props-selector .prop dd {
            margin-left: 65px;
        }

        .sku-props-selector .msg {
            margin: 10px 0 10px 65px;
        }

        .msg .error, .msg .stop, .msg .alert, .msg .attention, .msg .tips, .msg .ok, .msg .notice, .msg .question, .msg .help, .msg .small-help {
            color: #404040;
            background: transparent url(//assets.alicdn.com/sys/common/img/msg_bg.png) no-repeat -9999px -9999px;
            border: 1px solid #ddd;
            float: left;
            padding: 2px 10px 2px 23px;
            line-height: 18px;
        }

        .msg .error {
            background-position: 3px 3px;
            border-color: #ff8080;
            background-color: #fff2f2;
        }

        .sku-props-selector .operate {
            padding-left: 65px;
            overflow: hidden;
        }

        .sku-props-selector .operate {
            float: left;
        }

        .icon-freegift, .lottery-tips .arrow, .float-bar-right, .promo-main .promo-activityp, .btn-edit-sku, .icon-announcement, .pre-promos, .pre-promos .arrow, .coupon-popup .ks-ext-close-x, .coupon-amount, .icon-ju11, .item-content .text-amount, .btn-switch-cart, .btn-switch-cart .txt, .promo-ask-btn, .icon-time, .item-icon-list .arrow, .ks-ext-close, .ks-overlay-close, .close, .icon, .cart-filters .active, .cart-filters .active a, .cart-sum .submit-btn, .btn-select-sku, .go-top, .price-promo .promo, .pipe-left, .pipe-right, .add-cart, .carousel .prev, .carousel .next, .group-checkout, .group-expand, .group .group-info .pipe, .select-sku, .select-sku span, .float-bar-wrapper .pipe, .submit-btn b, .float-bar-wrapper, .sku-edit-popup .add-cart, .selected-items-arrow, .icon-invalid, .icon-redemption, .sku-edit-popup .arrow, .small2big-popup .arrow {
            background: transparent url(//img.alicdn.com/tfs/TB1K3cfdhGYBuNjy0FnXXX5lpXa-271-453.png) no-repeat -9999px -9999px;
        }

        .sku-edit-popup .add-cart {
            display: block;
            width: 55px;
            height: 21px;
            overflow: hidden;
            float: left;
            text-decoration: none;
            line-height: 21px;
            border: 1px solid #ff5704;
            color: #fff;
            -webkit-border-radius: 2px;
            -moz-border-radius: 2px;
            -ms-border-radius: 2px;
            border-radius: 2px;
            background: #f50;
            text-align: center;
        }

        .sku-props-selector .operate .add-cart {
            margin-right: 12px;
        }

        .sku-props-selector .operate .cancel {
            color: #0b72a4;
        }

        .sku-edit-popup .sku-item-pic {
            position: absolute;
            right: 0;
            top: 0;
            width: 180px;
            text-align: center;
            min-height: 180px;
        }

        .sku-edit-popup .sku-item-pic .cart-pic {
            position: absolute;
            top: 50%;
            left: 50%;
            margin: -80px 0 0 -80px;
        }

        .cart-pic a {
            display: table-cell;
            vertical-align: middle;
            text-align: center;
        }

        .s160, .s160 a {
            width: 160px;
            height: 160px;
        }

        .s160 img {
            max-width: 160px;
            max-height: 160px;
        }

        .cart-pic a img {
            vertical-align: middle;
        }

        .sku-edit-popup .arrow {
            position: absolute;
            left: 33px;
            top: -9px;
            width: 18px;
            height: 9px;
            display: block;
            background-position: 0 0;
        }

    </style>
</head>
<body>
<script src="${pageContext.request.contextPath}/static/js/frame/jquery-3.5.1.min.js"></script>

<script>

    var isFirst = true;
    $(function () {
        $(document).ready(function () {
            // 生成修改框
            var $editBox = generateEditSku().appendTo("body");
            $.ajax({
                type: "GET",
                url: "${pageContext.request.contextPath}/productBuy_logic/initSku.htm",
                data: {"pid": 3},
                async: false,
                success: function (data) {
                    // 分割字符
                    var params = data.split("<>");
                    // 获取商品sku属性
                    var skus = params[0];
                    var skuJson = eval("(" + skus +")");
                    var allCategory = skuJson[0]['productSpaceData'].replace("{", "").replace("}", "").replaceAll("\"", "").split(",");
                    var skuData = new Array();
                    for (let i = 0; i < skuJson.length; i++) {
                        skuData.push(eval("("+ skuJson[i]['productSpaceData'] +")"));
                    }
                    var skuStock = new Array();
                    for (let i = 0; i < skuJson.length; i++) {
                        skuStock.push(eval("("+ skuJson[i]['productStock'] +")"))
                    }
                    // 获取sku组编号
                    var skuCodes = params[1].split(",");
                    // 先获取所有的键
                    var skuKeys = new Array();
                    for (let i = 0; i < allCategory.length; i++) {
                        skuKeys.push(allCategory[i].split(":")[0])
                    }

                    var skuBoxs = new Array();
                    for (let i = 0; i < skuKeys.length; i++) {
                        var $skuBox = generateSkuBox(skuKeys[i], i);
                        skuBoxs.push($skuBox);
                        $(".hidden-msg").before($skuBox);
                    }
                    var helpArray = new Array();
                    for (let i = 0; i < 1; i++) {
                        for (let j = 0; j < skuJson.length; j++) {
                            if(j>0){
                                helpArray.push(skuJson[j-1][skuKeys[i]]);
                            }
                            if(!helpArray.includes(skuJson[j][skuKeys[i]])){
                                if(j == 0){
                                    var skuLi = generateCkb(skuJson[j][skuKeys[i]], skuCodes[j]).appendTo(skuBoxs[i].find("ul"));
                                } else{
                                    var skuLi = generateB(skuJson[j][skuKeys[i]], skuCodes[j]).appendTo(skuBoxs[i].find("ul"));
                                }
                            }
                        }
                    }
                    change(skuCodes[0], true, false, null);
                }
            });
        });


        // 点击sku按钮
        $("body").on("click", ".prop-block", function () {
            change($(this).attr("data-skuid"), false, true, $(this));
        })
    });

    function change(skuId, isInit, isThat, that){
        var that = isThat?that:$("li[data-skuid="+skuId+"]");
        var isSelected = that.hasClass("selected");
        if(isSelected && !isFirst){
            that.removeClass("selected");
            return false;
        }
        isFirst = false;
        that.addClass("selected").siblings().removeClass("selected");
        var nowIndex = isInit?0:that.parents(".J_Prop").attr("data-index");
        $.ajaxSettings.async = false;
        $.get("/productBuy_logic/getSkuAttrs.htm", {"pid": 3, "skuId":skuId, "nowIndex": nowIndex}, function (data) {

            var params = data.split("<>");
            var skus = params[0];
            var skuJson = eval("(" + skus +")");
            var skuCodes = params[1].split(",");
            var skuKeys = new Array();
            for (var key in skuJson[0]){
                skuKeys.push(key);
            }
            for (let i = 0; i <= nowIndex; i++) {
                skuKeys.shift();
            }
            for (let i = 0; i < skuKeys.length; i++) {
                $(".J_Prop[data-index="+nowIndex+"]").next().remove();
            }
            var skuBoxs = new Array();
            for (let i = 0; i < skuKeys.length; i++) {
                var skuBox = generateSkuBox(skuKeys[i], parseInt(nowIndex)+(i+1));
                skuBoxs.push(skuBox);
                $(".hidden-msg").before(skuBox);
            }
            var helpArray = new Array();
            for (let i = 0; i < skuKeys.length; i++) {
                for (let j = 0; j < skuJson.length; j++) {
                    if(j>0){
                        helpArray.push(skuJson[j-1][skuKeys[i]]);
                    }
                    if(!helpArray.includes(skuJson[j][skuKeys[i]])){
                        if(j == 0){
                            var skuLi = generateCkb(skuJson[j][skuKeys[i]], skuCodes[j]).appendTo(skuBoxs[i].find("ul"));
                        } else{
                            var skuLi = generateB(skuJson[j][skuKeys[i]], skuCodes[j]).appendTo(skuBoxs[i].find("ul"));
                        }
                    }
                }
            }

        });
    }

    function updateSku() {
        // 获取最后一个选中的skuid ，根据它改变价格库存
        var finalSkuId = $(".J_Prop:last .selected").attr("data-skuid");
        $.get("/productBuy_logic/getSkuData.htm", {"skuId":finalSkuId}, function (data) {
            var skuJson = eval("("+ data +")");
            var price = skuJson["productPrice"];
            var stock = skuJson["productStock"];
        });
    }

    function generateSkuBox(text, index) {
        return $("<dl class='prop clearfix J_Prop' data-index='"+index+"'>"+
        "<dt>"+text+"</dt>"+
        "<dd>"+
            "<ul class='clearfix'>"+
            "</ul>"+
        "</dd>"+
    "</dl>");
    }

    function generateCkb(text, skuId) {
        return $("<li data-prop='"+text+"' data-skuid='"+skuId+"' class='prop-block J_PropBlock selected' title='M'>"+
        "<a href='javascript: void(0)'><span>"+text+"</span></a><i></i></li>"+
        "</ul>");
    }

    function generateB(text, skuId) {
        return $("<li data-prop='"+text+"' data-skuid='"+skuId+"' class='prop-block J_PropBlock' title='M'>"+
            "<a href='javascript: void(0)'><span>"+text+"</span></a><i></i></li>"+
            "</ul>");
    }



    function generateEditSku() {
        return $("<div class='J_SkuEdit sku-edit-popup' style='display: block; top: 265.08px; left: 749.5px;'>"+
            "<div class='sku-edit-content'>"+
                "<div class='sku-props-selector clearfix'>"+

                    "<div class='msg hidden-msg' style='display: none;'>"+
                        "<p class='error J_ErrorInfo'></p>"+
                    "</div>"+
                    "<p class='operate'>"+
                        "<a href='javascript:void(0);' class='add-cart J_AddCart'>"+
                            "<span>确定</span>"+
                        "</a>"+
                        "<a href='javascript:void(0);' class='cancel J_Cancel'>取消</a>"+
                    "</p>"+
                "</div>"+
            "</div>"+
            "<div class='sku-item-pic J_SkuItemPic' style='height: 221px;'>"+
                "<div class='cart-pic s160'><a href='//detail.tmall.com/item.htm?id=600495300170' target='_blank'>"+
                    "<img src='//img.alicdn.com/bao/uploaded/i4/2146928739/O1CN011ejW812EQVlrJyuJo_!!0-item_pic.jpg_160x160.jpg'></a>"+
                "</div>"+
            "</div>"+
            "<span class='arrow'></span>"+
        "</div>");
    }

</script>
</body>
</html>
